<template>
  <div class="turnTable">
    <infoText ref="infoText"></infoText>
    <div class="part1">
      <img class="img" src="./img1/a16.png" alt="" />
      <img class="img1" src="./img1/a13.png" alt="" />
      <img class="img2" src="./img1/a14.png" alt="" />
    </div>
    <div class="part2">好礼抽奖转不停</div>
    <div class="part3">
      <div class="part31" @click="alertEl1 = true">
        <span>活动规则</span>
      </div>
      <div class="part32" @click="alertEl4 = true">
        <span>中奖记录</span>
      </div>
    </div>
    <div id="stage">
      <div class="stage3">
        <img class="img4" src="./img1/a22.png" alt="" />
        <img class="img5" src="./img1/a19.png" alt="" />
        <img class="img1" src="./img1/a11.png" alt="" />
        <img class="img2" src="./img1/a17.png" alt="" />
        <img class="img3" src="./img1/a18.png" alt="" />
      </div>
    </div>
    <div class="part4" @click="alertEl3 = true">隐私政策</div>
    <div class="part5" v-show="alertEl1" @click="alertEl1 = false">
      <div class="part51" @click.stop>
        <div class="part51T">活动规则</div>
        <div class="part511">
          <p>
            1、立减金有效期为30天，只在工银借记卡绑定微信支付达到立减金金额时可使用，请及时领取使用，过期概不补发或退换。
          </p>
          <p>
            2、立减金可在微信卡包中查询，如立减金已过期或已核销则无法在以上路径查询。客户可在“微信支付”公众号中查看领取日消息记录及券码详情，或在：微信-我-卡包-常见问题-历史卡券列表中查看。
          </p>
          <p>
            3、享受微信立减金优惠的订单，如发生全额退款，仅退还客户订单实际支付金额，立减金如在有效期内则退回给客户继续使用，退回的立减金若已过有效期则无法使用，且不予补发；如发生部分退款，则按比例退还客户订单实际支付的金额，因立减金已使用且不可拆分不找零，不支持退回客户微信卡包。
          </p>
          <p>
            4、如客户由于自身工银借记卡额度不足、卡被冻结、或自身电子设备系统问题等而导致无法使用红包，请客户使用前确认自己的工银借记卡有可用额度且卡片状态正常。
          </p>
          <p>
            5、客户可通过在微信支付账单详情中，查看本次交易的交易方式：单号10000开头为转账交易，不可使用立减金；单号42000开头为商业支付，可使用立减金。
          </p>
          <p>
            6、活动中，立减金中奖页面请勿转发朋友圈或他人，否则由此造成的后果由用户自行承担。同时用户如出现违反国家法律法规、《微信支付服务协议》或以不正常手段参与活动，将取消用户活动资格并追究法律责任。
          </p>
          <p>7、如有疑问，欢迎联系云管家微信公众号客服咨询。</p>
          <p>该活动解释权归工银江苏金融云管家所有。</p>
        </div>
        <div class="part512" @click="alertEl1 = false">
          <img src="./img1/a6.png" alt="" />
        </div>
      </div>
    </div>
    <div class="part5" v-show="alertEl3" @click="alertEl3 = false">
      <div class="part51" @click.stop>
        <div class="part51T">隐私政策</div>
        <div class="part511">
          <p>本系统平台不记录与利用用户任何信息，用户信息均归合作行方所有。</p>
        </div>
        <div class="part512" @click="alertEl3 = false">
          <img src="./img1/a6.png" alt="" />
        </div>
      </div>
    </div>
    <div class="part5" v-show="alertEl2" @click="alertEl2 = false">
      <div class="part52" @click.stop>
        <div class="part521">
          <p>恭喜您获得</p>
          <p class="part5211"><span class="part52111">￥</span>{{ luckInfo.yuan }}</p>
        </div>
        <div class="part522" @click="alertEl2 = false">关闭</div>
      </div>
    </div>
    <div class="part5" v-show="alertEl4" @click="alertEl4 = false">
      <div class="part51" @click.stop>
        <div class="part51T">中奖记录</div>
        <div class="part511">
          <div class="part513">
            <img class="part5132" src="./img1/a9.png" alt="" />
            <div class="part5131">
              <p>立减金￥{{ luckInfo.yuan }}</p>
              <p>
                <span>{{ luckInfo.time }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="part512" @click="alertEl4 = false">
          <img src="./img1/a6.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TurnGame from './game'
import $util from '../../utils'

export default {
  data() {
    return {
      door1: true,
      alertEl1: false,
      alertEl2: false,
      alertEl3: false,
      alertEl4: false,
      gameData: null,
      luckInfo: {
        yuan: '0.00',
        time: '2021/9/30 12:30',
      },
      prizeNo: 0,
      obj: {},
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '三方存管 幸运大转盘',
    })
    this.obj = {
      prizeList: [
        {
          name: 'wwd',
          img: require('./img1/11.png'),
        },
        {
          name: 'kcg',
          img: require('./img1/12.png'),
        },
        {
          name: 'xjz',
          img: require('./img1/13.png'),
        },
        {
          name: 'jjp',
          img: require('./img1/14.png'),
        },
        {
          name: 'jm',
          img: require('./img1/15.png'),
        },
        {
          name: 'wsh',
          img: require('./img1/16.png'),
        },
        {
          name: 'ht',
          img: require('./img1/17.png'),
        },
        {
          name: 'xy',
          img: require('./img1/18.png'),
        },
      ],
      cPlayImg: require('./img1/a20.png'),
      prizeNo: 3,
      width: window.innerWidth * 0.8,
      height: window.innerWidth * 0.8,
      el: document.querySelector('#stage'),
      vue: this,
    }

    try {
      let qData = $util.urlQuery('qd')
      if (qData) {
        let obj1 = JSON.parse(qData)
        Object.assign(this.obj, obj1)
      }
    } catch (error) {}

    if (this.obj.prizeNo) {
      this.prizeNo = this.obj.prizeNo
    }

    const reLoad = () => {
      if (this.gameData) {
        this.gameData.stop()
      }
      this.gameData = null
      this.gameData = new TurnGame(this.obj)
      this.gameData.init()
    }

    reLoad()
  },
  methods: {
    turnPlay() {
      if (this.door1) {
        this.door1 = false
        function randomNum(m, n) {
          return Math.floor(Math.random() * (n - m) + m)
        }

        this.prizeNo = randomNum(0, this.obj.prizeList.length)
        console.log(this.prizeNo)
        this.gameData.playGame()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.turnTable {
  background: url('./img1/bg.png') 0% 0% no-repeat;
  background-size: 100%;
  min-height: 100vh;
  background-color: #ffc368;
  .mask1-1 {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    .mask1-2 {
      width: 610rpx;
      background-color: #fff;
      border-radius: 16rpx;
      text-align: center;
      padding: 100rpx 0;
    }
    .mask1-2-1 {
      margin-bottom: 50rpx;
      color: #c55a13;
    }
  }
  .part1 {
    padding-top: 108rpx;
    text-align: center;
    margin-bottom: 24rpx;
    .img {
      width: 589rpx;
      height: 127rpx;
    }
    .img2 {
      position: fixed;
      bottom: 16rpx;
      left: -38rpx;
      width: 209rpx;
      height: 369rpx;
      z-index: 10;
    }
    .img1 {
      position: fixed;
      bottom: 16rpx;
      right: -38rpx;
      width: 197rpx;
      height: 421rpx;
      z-index: 10;
    }
  }
  .part2 {
    width: 390rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 32rpx;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 30rpx;
    margin: 0 auto;
    text-align: center;
    border: 2rpx solid rgba(255, 255, 255, 0.39);
    margin-bottom: 123rpx;
  }
  .part3 {
    position: fixed;
    right: 0;
    top: 174rpx;
    span {
      display: inline-block;
      width: 24rpx;
      padding-left: 22rpx;
    }
    .part31 {
      width: 57rpx;
      height: 176rpx;
      color: #c55a13;
      font-size: 24rpx;
      background: url('./img1/a3.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .part32 {
      width: 57rpx;
      height: 176rpx;
      color: #fff;
      font-size: 24rpx;
      background: url('./img1/a2.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
  }
  #stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 732rpx;
    position: relative;
    .stage3 {
      img {
        position: absolute;
      }
      .img1 {
        width: 218rpx;
        height: 47rpx;
        top: 24rpx;
        left: 50%;
        transform: translateX(-50%);
      }
      .img3 {
        width: 49rpx;
        height: 218rpx;
        top: 50%;
        left: 24rpx;
        transform: translateY(-50%);
      }
      .img2 {
        width: 49rpx;
        height: 218rpx;
        top: 50%;
        right: 24rpx;
        transform: translateY(-50%);
      }
      .img4 {
        width: 518rpx;
        height: 155rpx;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .img5 {
        width: 652rpx;
        height: 652rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .part4 {
    text-align: center;
    text-decoration: underline;
    text-align: center;
    color: #9e6b19;
    line-height: 40rpx;
    font-size: 28rpx;
    padding-top: 49rpx;
  }
  .part5 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .part51 {
      width: 610rpx;
      height: 850rpx;
      background: url('./img1/a1.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .part51T {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
        top: 60rpx;
        color: #fff;
      }
      .part511 {
        width: 500rpx;
        height: 572rpx;
        overflow: hidden;
        overflow-y: auto;
        font-size: 28rpx;
        padding-right: 20rpx;
        line-height: 44rpx;
        color: #333;
      }
      .part512 {
        position: absolute;
        bottom: 0;
        width: 44rpx;
        height: 44rpx;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .part513 {
        display: flex;
        background: #f7f7f7;
        width: 500rpx;
        .part5132 {
          width: 30%;
        }
        .part5131 {
          font-size: 24rpx;
          padding-top: 20rpx;
          span {
            border: 1px solid #c55a13;
            border-radius: 6px;
            font-size: 20rpx;
            line-height: 20rpx;
            padding: 2rpx 6rpx;
          }
        }
      }
    }
    .part52 {
      width: 610rpx;
      height: 636rpx;
      background: url('./img1/a10.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .part521 {
        padding-top: 78rpx;
        height: 308rpx;
        color: #bf7238;
        font-size: 32rpx;
        line-height: 44rpx;
        .part5211 {
          font-size: 50rpx;
          line-height: 100rpx;
          color: #ff1f30;
        }
        .part52111 {
          font-size: 32rpx;
        }
      }
      .part522 {
        width: 528rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: url('./img1/a4.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        color: #ff1f30;
        font-size: 32rpx;
        margin-top: 60rpx;
      }
    }
  }
}
</style>
